<template>
  <div class="companyMailList-container">
    <div class="setContent">
      <div class="title">通讯录信息</div>
      <div class="cont">
        <div class="hTit">企业通讯录信息</div>
        <div class="itemCont">
          <span v-for="item in initData" :key="item.id" class="item">
            <span class="itemName"> {{ item.name }} </span>
            <span class="hovShow">{{ item.name }}</span>
            <i v-if="item.type == 'dynamic'" @click="delFont(item)">+</i>
          </span>
          <span class="item addItem" @click="addFont"> + 添加字段 </span>
        </div>
        <div class="hTit">个人详情页展示的字段</div>
        <div class="itemCont">
          <div class="fontCont">
            <el-checkbox-group v-model="checkList">
              <el-checkbox v-for="item in initData" :key="item.id" :class="{longHov: item.name.length > 5}" :label="item.id" @change="changeFontShow(item)">
                <span class="itemName" style="width: 80px;height: 18px;">{{ item.name }}</span>
                <span class="hovShow">{{ item.name }}</span>
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="phoneShow">
            <div class="phoneHead" />
            <div v-if="showData.length>0" class="phoneCont">
              <div class="tit">企业信息</div>
              <div class="contBox">
                <div v-for="item in showData" :key="item.id" class="items">
                  <p class="lab">{{ item.name }}</p>
                  <p class="inp">{{ `请输入${item.name}` }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div />
      </div>
    </div>
    <el-dialog
      title="添加字段"
      center
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>字段名称：<input v-model="addFontValue" type="text" class="fontName" placeholder="请输入字段名"></span>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" style="background: #3345ff" size="mini" @click="addFontSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {
      loading: true,
      dialogVisible: false,
      addFontValue: '',
      checkList: [],
      showData: [],
      initData: []
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.$store.dispatch('company/getCompanySetAct').then((res) => {
        this.initData = res
        const arr = []
        res.map(n => {
          if (n.status === 1) {
            arr.push(n.id)
          }
        })
        this.checkList = arr
        this.showDataComputed()
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    addFont() {
      this.dialogVisible = true
    },
    delFont(row) {
      this.$store.dispatch('company/delCompanyFontAct', { id: row.id }).then((res) => {
        this.$message.success('字段删除成功！')
        this.init()
      }).catch(() => {
        this.$message.error('数据提交失败！')
        this.dialogVisible = false
      })
    },
    addFontSubmit() {
      if (this.addFontValue === '') {
        this.$message.error('字段名称不能为空！')
        return false
      }
      this.$store.dispatch('company/addCompanyFontAct', { name: this.addFontValue }).then((res) => {
        this.$message.success('字段添加成功！')
        this.init()
        this.dialogVisible = false
      }).catch(() => {
        this.$message.error('数据提交失败！')
        this.dialogVisible = false
      })
    },
    handleSelectionChange(val) {
      const n = val.filter(item => !this.multipleSelection.includes(item))
      console.log(n) // 本次新增的项
      this.multipleSelection = val
    },
    changeFontShow(val) {
      console.log(val)
      this.showDataComputed()
      this.$store.dispatch('company/putCompanyFontAct', { id: val.id, type: val.type, name: val.name, status: Math.abs(val.status - 1) }).then((res) => {
        this.init()
        this.dialogVisible = false
      }).catch(() => {
        this.$message.error('数据提交失败！')
        this.dialogVisible = false
      })
    },
    showDataComputed() {
      const newArr = []
      this.initData.map(n => {
        this.checkList.map(h => {
          if (n.id === h) {
            newArr.push(n)
          }
        })
      })
      this.showData = newArr
    }
  }
}
</script>
<style lang="scss">
  .companyMailList-container{
    .fontCont .el-checkbox__input{
      position: relative;
      top:-4px;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background-color:#3345ff;
      border-color: #3345ff;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label{
      color:#000;
    }
    .el-checkbox{
      width: 110px;
      margin: 5px 0;
    }
  }
</style>
<style lang="scss" scoped>
  .companyMailList {
    &-container {
      .setContent {
        .title {
          padding: 0 15px;
          text-align: center;
          line-height: 40px;
          background: #eceffc;
        }
        .cont {
          padding: 20px;
          .hTit{
            margin-bottom: 10px;
            padding-bottom: 10px;
            &:before{
              content: '';
              display: inline-block;
              position: relative;
              top:-1px;
              width: 10px;
              height: 10px;
              margin-right: 10px;
              background: #3345ff;
            }
          }
          .itemCont{
            display: flex;
            flex-wrap: wrap;
            padding: 0 10px;
            margin-bottom: 15px;
              .item{
                position: relative;
                margin: 10px;
                background: #fff;
                width: 120px;
                text-align: center;
                line-height: 40px;
                border-radius: 6px;
                box-shadow: 2px 2px 10px #ccc;
                i{
                  display: none;
                  background: #f00;
                  position: absolute;
                  transform: rotate(45deg);
                  width: 12px;
                  height: 12px;
                  line-height: 10px;
                  color:#fff;
                  text-align: center;
                  border-radius: 100%;
                  font-size: 14px;
                  font-style: normal;
                  right: -3px;
                  top:-2px;
                  cursor:pointer;
                }
                &:hover i{
                  display: block;
                }
              }
            .itemName{
              display: inline-block;
              width: 110px;
              height: 30px;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
            }
            .longHov:hover .hovShow{
              display: inline-block;
            }
            .hovShow{
              display: none;
              position: absolute;
              text-align: center;
              left: 0;
              top: -45px;
              border-radius: 5px;
              padding: 10px;
              min-width: 120px;
              background: #fff;
              border:solid 1px #f4f4f4;
              z-index: 99;
            }
            .addItem{
              background: #3345ff;
              color:#fff;
              cursor:pointer;
            }
            .fontCont{
              flex: 1;
            }
            .phoneShow{
              width: 222px;
              height: 440px;
              background: url('./../../assets/img/phoneBg.png');
              .phoneHead{
                padding: 0 20px;
                height: 162px;
              }
              .phoneCont{
                padding:0 15px;
                font-size: 12px;
                color: #a5a5a8;
                .tit{
                    line-height: 25px;
                     padding: 0 10px;
                }
                .contBox{
                  height: 225px;
                  overflow: scroll;
                }
                .items{
                  border-bottom: solid 1px #f4f4f4;
                  font-size: 10px;
                  padding: 0 5px;
                  line-height: 23px;
                  p{
                    margin: 0;
                    padding: 0;
                  }
                }
              }
            }
          }
        }
      }
      .fontName{
        font-size: 14px;
        padding: 4px 10px;
        border-radius: 3px;
        border: solid 1px #d3d3d3;
      }
    }
  }
</style>
